<template>
  <div class="component-editor">
    <!-- 组件编辑器标题 -->
    <h2>{{ componentName }} 组件设置</h2>
    
    <!-- 基本编辑表单 -->
    <el-form label-width="100px">
      <!-- 示例：基本属性部分 -->
      <el-divider content-position="left">基本属性</el-divider>
      
      <!-- 文本输入示例 -->
      <el-form-item label="文本内容">
        <el-input v-model="componentData.props.textContent" placeholder="请输入文本内容"></el-input>
      </el-form-item>
      
      <!-- 开关示例 -->
      <el-form-item label="启用功能">
        <el-switch v-model="componentData.props.enabled"></el-switch>
      </el-form-item>
      
      <!-- 选择器示例 -->
      <el-form-item label="类型">
        <el-select v-model="componentData.props.type" placeholder="请选择类型">
          <el-option label="类型1" value="type1"></el-option>
          <el-option label="类型2" value="type2"></el-option>
          <el-option label="类型3" value="type3"></el-option>
        </el-select>
      </el-form-item>
      
      <!-- 数值输入示例 -->
      <el-form-item label="数值">
        <el-input-number v-model="componentData.props.value" :min="0" :max="100"></el-input-number>
      </el-form-item>
      
      <!-- 示例：样式部分 -->
      <el-divider content-position="left">样式设置</el-divider>
      
      <!-- 颜色选择器示例 -->
      <el-form-item label="主题颜色">
        <el-color-picker v-model="componentData.style.themeColor"></el-color-picker>
      </el-form-item>
      
      <!-- 示例：数据项列表编辑 -->
      <el-divider content-position="left">数据项</el-divider>
      
      <el-button type="primary" size="small" @click="addItem" style="margin-bottom: 15px;">
        添加数据项
      </el-button>
      
      <div v-for="(item, index) in componentData.props.items" :key="index" class="data-item-edit">
        <div class="item-header">
          <span>数据项 {{ index + 1 }}</span>
          <el-button 
            type="danger" 
            size="small" 
            icon="Delete" 
            circle
            @click="removeItem(index)"
          ></el-button>
        </div>
        
        <el-form-item label="标题">
          <el-input v-model="item.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        
        <el-form-item label="值">
          <el-input v-model="item.value" placeholder="请输入值"></el-input>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch, toRefs } from 'vue';
import { useDesignStore } from '@/stores/designStore';

const props = defineProps({
  // 组件ID
  componentId: {
    type: String,
    required: true
  },
  // 组件数据（可选，一般通过componentId从store获取）
  componentData: {
    type: Object,
    default: null
  }
});

const designStore = useDesignStore();

// 通过ID获取组件数据
const component = computed(() => {
  if (props.componentData) return props.componentData;
  return designStore.findComponentById(designStore.canvasComponents, props.componentId);
});

// 提取组件名称（去掉ew-前缀）用于显示
const componentName = computed(() => {
  if (!component.value) return '';
  return component.value.type.replace('ew-', '');
});

// 确保组件有必要的数据结构
watch(component, (newComponent) => {
  if (newComponent) {
    // 初始化必要的props属性
    if (!newComponent.props) {
      designStore.updateComponentProps(props.componentId, {});
    }
    
    // 初始化必要的数据项数组
    if (!newComponent.props?.items) {
      designStore.updateComponentProps(props.componentId, { 
        items: [{ title: '数据项1', value: '值1' }] 
      });
    }
    
    // 初始化必要的样式属性
    if (!newComponent.style?.themeColor) {
      designStore.updateComponentStyle(props.componentId, { 
        themeColor: '#409EFF' 
      });
    }
  }
}, { immediate: true });

// 添加数据项
const addItem = () => {
  if (!component.value?.props?.items) return;
  
  const newItems = [...component.value.props.items, {
    title: `数据项${component.value.props.items.length + 1}`,
    value: `值${component.value.props.items.length + 1}`
  }];
  
  designStore.updateComponentProps(props.componentId, { 
    items: newItems 
  });
};

// 删除数据项
const removeItem = (index: number) => {
  if (!component.value?.props?.items) return;
  
  const newItems = [...component.value.props.items];
  newItems.splice(index, 1);
  
  designStore.updateComponentProps(props.componentId, { 
    items: newItems 
  });
};

/* 
  使用说明：
  1. 这是一个通用的组件编辑器模板，可用于创建自定义组件的属性编辑器
  2. 复制此文件到自己的组件目录，命名为editor.vue
  3. 修改组件名和属性编辑部分，适配自己组件的实际需要
  4. 确保设置的属性与组件实际使用的属性保持一致
*/
</script>

<style scoped>
.component-editor {
  width: 100%;
  padding: 0 10px 20px;
  box-sizing: border-box;
}

/* 标题样式 */
h2 {
  padding: 20px 0;
  margin-bottom: 15px;
  border-bottom: 1px solid #f2f4f6;
  font-size: 18px;
  font-weight: 600;
  color: #323233;
}

/* 数据项编辑样式 */
.data-item-edit {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 15px;
  background-color: #fafafa;
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  font-weight: 500;
}

/* 防止表单挤压在小屏幕上 */
:deep(.el-form-item__content) {
  flex-wrap: wrap;
}
</style> 